<template>
  <el-dropdown class="xt-dropdown">
    <span class="el-dropdown-link outline-none">
      <slot>下拉菜单</slot>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item
          v-for="{ code, name, icon, i18n, ...op } in options"
          :key="code"
          :command="code"
          v-bind="op"
        >
          <i v-if="icon" class="iconfont" :class="icon" />
          <span>{{ setI18n(i18n, name) }}</span>
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script lang="ts">
export default {
  name: "xt-dropdown",
};
</script>

<script setup lang="ts">
import { useLocalI18n } from "@/locales/i18n";
import { OptionType } from "@/typings";

interface PropType {
  options: OptionType[];
}

const { setI18n } = useLocalI18n();

withDefaults(defineProps<PropType>(), {
  options: () => [],
});
</script>
